// 为了让js更好的适合大型企业级开发，原型式的面向对象 升级为传统的面向对象
// 拥抱其让更多其他语言程序员
// class extend implement oo 能力用出来
// 随时es5没有的class，本质仍然是原型式的，只能是语法糖

class EditInPlace{
    constructor(storageKey, container, value = '这个家伙很懒，什么都没有留下'){
        console.log(this.value);
        this.storageKey = storageKey;
        this.container = container;
        this.value = value;
        // 将动态创建文本和编辑input的dom封装，代码的管理好
        this.createElement();
        // console.log(this.value);
        this.attachEvents();
    }
    createElement(){
        // DOM树
        // 创建一个div
        this.editElement = document.createElement('div');
        // 添加一个子元素
        this.container.appendChild(this.editElement)

        // signature 文本值
        this.staticElement = document.createElement('span')
        this.staticElement.innerHTML = this.value
        this.editElement.appendChild(this.staticElement)

        // input
        this.fieldElement =  document.createElement('input');
        this.fieldElement.type = 'text'
        this.fieldElement.value = this.value
        this.editElement.appendChild(this.fieldElement)
        
        // 保存按钮
        this.saveButton = document.createElement('input')
        this.saveButton.type = 'button'
        this.saveButton.value = '保存'
        this.editElement.appendChild(this.saveButton)

        // 取消按钮
        this.cancelButton = document.createElement('input')
        this.cancelButton.type = 'button'
        this.cancelButton.value = '取消'
        this.editElement.appendChild(this.cancelButton)

        // 初始文本状态
        this.converToText()
    }
    // 文本状态
    converToText(){
        this.staticElement.style.display = 'inline'
        this.fieldElement.style.display = 'none'
        this.saveButton.style.display = 'none'
        this.cancelButton.style.display = 'none'
    }
    // 编辑状态
    converToEdit(){
        this.staticElement.style.display = 'none'
        this.fieldElement.style.display = 'inline'
        this.saveButton.style.display = 'inline'
        this.cancelButton.style.display = 'inline'
    }
    attachEvents(){
        // this 
        this.staticElement.addEventListener('click',() =>{
            this.converToEdit()           
        })
        this.saveButton.addEventListener('click',() =>{
            this.save()
        })
        this.cancelButton.addEventListener('click',() =>{
            this.converToText()
        })
    }
    save(){
        this.value = this.fieldElement.value       
    }
    get value(){
        console.log('DAMN');
        return this.value
    }
    set value(value){
        console.log('damn');
        this.value = value
        this.staticElement.innerHTML = this.value
        this.converToText();
        // html5 localStorage 本地存储
        localStorage.setItem(this.storageKey,this.value)
    }
}
